<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>QSKJ_LOCAL</title>
    <script type="text/javascript" src="/Public/Build/Cesium/Cesium.js"></script>
    <script type="text/javascript" src="/Public/js/ellipsoidTrailMaterialProperty.js"></script>
    <script src="/Public/js/jquery-3.7.1.min.js"></script>
    <link rel="stylesheet" href="/Public/Build/Cesium/Widgets/widgets.css">
</head>

<body>
    <div id="cesiumContainer"></div>
    <script type="module">
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MjczNDgzMy1hYzE1LTRjNWYtODZhMS01MjZkNWRiMDc2MmUiLCJpZCI6ODIxMzAsImlhdCI6MTY0NDU0ODc0M30.LpGXXWsbQXucV5MTeC2g8BCAQWiZp612gosWcK-7ocE';

        const viewer = new Cesium.Viewer('cesiumContainer', {
            terrain: Cesium.Terrain.fromWorldTerrain(),
        });

        const shaderSource4 =
            `
            czm_material czm_getMaterial(czm_materialInput materialInput){
                czm_material material = czm_getDefaultMaterial(materialInput);

                vec2 st = materialInput.st; // 获取纹理坐标

                float dist = distance(st, vec2(0.5)); // 计算当前像素到中心的距离
                float time = clamp(fract(czm_frameNumber / 500.0)*0.5,0.0,0.5);
                float time2 = time + 0.01;
                float val = step(time,dist) * step(-time2,-dist);
                material.diffuse = vec3(val,0.0,0.0);
                material.alpha = val;
                return material;
            }
        `
    

        const mInstance = new Cesium.GeometryInstance({
            geometry: new Cesium.CircleGeometry({
                center: Cesium.Cartesian3.fromDegrees(100, 30),
                radius: 100.0,
                height: 4900,
            })
        });

        viewer.scene.primitives.add(new Cesium.GroundPrimitive({
            geometryInstances: mInstance,
            appearance: new Cesium.MaterialAppearance({
                material: new Cesium.Material({
                    translucent: false,
                    fabric: {
                        type: 'test',
                        uniforms: {
                            color: new Cesium.Color(1, 0, 0, 1),
                        },
                        // source: shaderSource4
                    }
                })
            }),
        }));


        viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(100, 30, 2000),
            duration: 0
        })

    </script>
    </div>
</body>

</html>